<template>
	<view class="bg-drak" :class="[empty ? '' : 'padding-tb']">
		<!-- 空白页 -->
		<!-- <use-empty v-if="empty" e-style="round" tip="暂无收藏数据"></use-empty> -->
		<view v-if="!empty" class="empty">
			<tui-no-data :fixed="false" imgUrl="/static/images/nodata/error.png">暂未收藏</tui-no-data>
		</view>
		<view v-else class="padding-lr" v-for="(item, index) in 5" :key="index">
			<view class="product border-radius-sm padding margin-bottom-sm bg-main" style="padding-bottom: 15rpx;">
				<view class="left" @click="togoods(item)">
					<image src="http://7dd-statics.7dingdong.com//data/files/goods/20191203/small_5de5ed567183a.jpg"
						mode="aspectFill"></image>
				</view>
				<view class="margin-left-sm pos-r w-full">
					<text class="clamp-2" @click="togoods(item)">J-硕琪动感单车家用静音磁控健身车豪华室内运动健身自行车健身器材SHQ-C03</text>
					<view class="pos-a dflex-b price-box w-full">
						<text class="price padding-tb-sm" @click="togoods(item)">3980.00</text>
						<view class="dflex-c ft-dark">
							<button class="btn no-border padding-0 fs-sm ft-dark" open-type="share" :id="item.goods_id">
								<!-- 	<view class="dflex-c fs-xs padding-tb-sm">
									<text class="iconfont iconfenxiang margin-left-xs"></text>
								</view> -->
							</button>
							<view @tap.stop="deleteCollect(item._id)" class="dflex-c margin-left-sm padding-tb-sm">
								<text class="iconfont iconlajitong-01 margin-left-xs"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 上拉加载更多 -->
		<use-loadmore v-if="!empty && hasmore" :type="loadmoreType"></use-loadmore>
		<!-- 置顶 -->
		<use-totop ref="usetop" bottom="150"></use-totop>

		<view v-if="empty" class="fixed-top" @click="clear">
			<text class="iconfont iconlajitong-01 fs-xl"></text>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				// 加载更多状态
				loadmoreType: 'nomore',
				// 数据源
				datas: [],
				empty: false,
				hasmore: 0,
				reqdata: {
					rows: 20,
					page: 1
				},
				scrollTop: 0,
			};
		},


		onPageScroll(e) {
			//this.scrollTop = e.scrollTop;
			this.$refs.usetop.change(e.scrollTop);
		},
		onShow() {
			this.loadData();
		},
		methods: {
			loadData() {


			},
			// 删除收藏
			deleteCollect(id) {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '删除收藏',
					success: function(res) {
						if (res.confirm) {
							_this.$db[_collect].where('create_uid == $env.uid').remove(id).then(res => {
								if (res.code === 200) {
									_this.loadData();
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 清空收藏
			clear() {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '清空收藏',
					success: function(res) {
						if (res.confirm) {
							_this.$db[_collect].where('create_uid == $env.uid').remove().then(res => {
								if (res.code === 200) {
									_this.datas = [];
									return;
								}
								_this.$api.msg(res.msg)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			togoods(item) {
				this.$api.togoods({
					id: item.goods_id
				});
			}
		}
	};
</script>

<style lang="scss">
	@import url("/static/css/common.scss");
	@import url("/static/css/iconfont.css");
	// page {
	// 	background: $page-color-base;
	// }

	.product {
		display: flex;

		.left {
			image {
				width: 180rpx;
				height: 180rpx;
			}
		}

		.price-box {
			bottom: -20rpx;
		}
	}
	
	.empty{
		margin-top: 200px;
	}
</style>